<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>数据1 {{this.$store.state.yihao}}</h1>
        <button @click="bian1">加一</button>
        <h1>数据2 {{this.$store.state.erhao}}</h1>
        <button @click="bian2">加一</button>
        <h1>数据3 {{this.$store.state.sanhao}}</h1>
        <button @click="bian3">加一</button>
        <h1>总价：{{this.$store.getters.he}}</h1>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vuex/dist/vuex.js"></script>
    <script>
        let store = new Vuex.Store({
            state : {
                yihao : 0,
                erhao : 0,
                sanhao : 0,
                zongjia : 0,
            },
            getters : {
                he : state => {
                    return state.zongjia = state.yihao + state.erhao + state.sanhao;
                },
            },
        });
        let vm = new Vue({
            el : "#app",
            store,
            methods: {
                bian1 : function(){
                    this.$store.state.yihao++;
                },
                bian2 : function(){
                    this.$store.state.erhao++;
                },
                bian3 : function(){
                    this.$store.state.sanhao++;
                },
            },
        });
    </script>
</body>
</html>